<!DOCTYPE html>
<!-- saved from url=(0062)https://blog.jiasm.org/notebook/html/flex/examples/sudoku.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>Example - sudoku</title>
  <style media="screen">
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      width: 300px;
      padding: 5px;

      border: 1px solid #00BCD4;
    }

    .container::after {
      content: '';
      flex: 1;
      /* height: 100%; */
    }

    .item {
      position: relative;
      width: 33.33%;
      height: auto;
    }

    .item::before {
      content: '';
      display: block;
      position: relative;
      width: 100%;
      padding-top: 100%;
    }

    .item-content {
      display: flex;
      position: absolute;
      top: 5px;
      left: 5px;
      bottom: 5px;
      right: 5px;
      align-items: center;
      justify-content: center;
      background-color: #8BC34A;
      color: #fff;
    }
  </style>
</head>

<body>
  <div>
    <p>Basic</p>
    <div class="container">
      <div class="item">
        <div class="item-content">Item 1</div>
      </div>
      <div class="item">
        <div class="item-content">Item 2</div>
      </div>
      <div class="item">
        <div class="item-content">Item 3</div>
      </div>
      <div class="item">
        <div class="item-content">Item 4</div>
      </div>
      <div class="item">
        <div class="item-content">Item 5</div>
      </div>
      <div class="item">
        <div class="item-content">Item 6</div>
      </div>
      <div class="item">
        <div class="item-content">Item 7</div>
      </div>
      <div class="item">
        <div class="item-content">Item 8</div>
      </div>
      <div class="item">
        <div class="item-content">Item 9</div>
      </div>
    </div>
  </div>

  <div>
    <p>Imperfect</p>
    <div class="container">
      <div class="item">
        <div class="item-content">Item 1</div>
      </div>
      <div class="item">
        <div class="item-content">Item 2</div>
      </div>
      <div class="item">
        <div class="item-content">Item 3</div>
      </div>
      <div class="item">
        <div class="item-content">Item 4</div>
      </div>
      <div class="item">
        <div class="item-content">Item 5</div>
      </div>
      <div class="item">
        <div class="item-content">Item 6</div>
      </div>
      <div class="item">
        <div class="item-content">Item 7</div>
      </div>
      <div class="item">
        <div class="item-content">Item 8</div>
      </div>
    </div>
  </div>


</body></html>